<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-input v-model="formSearch.nick_name" placeholder="搜索会员昵称" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="formSearch.phone" placeholder="搜索会员手机号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>

        <el-form-item v-if="SelectMember.length !=0">
          <el-button type="primary" size="mini" @click="handDiscount()">批量发送优惠券</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="multipleTable"
        :height="height-170"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        :data="tableData"
        :header-cell-style="{background:'#FAFAFA',color:'#606266'}"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" width="100" label="序号"></el-table-column>
        <el-table-column prop="nick_name" label="昵称"></el-table-column>
        <el-table-column prop="openid" label="openid" :show-overflow-tooltip="tooltip"></el-table-column>
        <el-table-column prop="phone" :show-overflow-tooltip="tooltip" label="手机号"></el-table-column>
        <el-table-column prop="headimageurl" label="头像" align="center">
          <template slot-scope="scope">
            <div class="img" style="cursor:pointer">
              <viewer>
                <img
                  :src="scope.row.headimageurl"
                  alt
                  :onerror="errImg"
                  title="查看高清头像"
                  style="width: 40px;height: 40px;border-radius: 50%"
                />
              </viewer>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="balance" :show-overflow-tooltip="tooltip" label="余额"></el-table-column>
        <el-table-column prop="create_time" :show-overflow-tooltip="tooltip" label="添加时间"></el-table-column>
        <el-table-column label="会员地址" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handAdress(scope.row)">查看</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handDiscount(scope.row)">发送优惠券</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 会员地址弹框 -->

      <el-dialog
        :visible.sync="adressVisible"
        title="会员地址"
        width="80%"
        top="8vh"
        custom-class="edit_dialog"
        style=" min-width: 300px;"
      >
        <el-table
          border
          ref="table"
          :height="height-170"
          :data="tableAdressData"
          :header-cell-style="{background:'#FAFAFA',color:'#606266'}"
          v-loading="Adressloading"
          element-loading-background="rgba(255, 255, 255, 0.5)"
          style="width: 100%"
        >
          <el-table-column prop="id" width="100" label="序号"></el-table-column>
          <el-table-column prop="user_name" label="	用户名"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="province" label="省"></el-table-column>
          <el-table-column prop="city" label="市"></el-table-column>
          <el-table-column prop="district" label="区"></el-table-column>
          <el-table-column prop="address" :show-overflow-tooltip="tooltip" label="详细地址"></el-table-column>
          <el-table-column prop="is_default" label="是否默认">
            <template slot-scope="scope">
              <el-tag type="success" size="small" v-if="scope.row.is_default == 1">是</el-tag>
              <el-tag type="danger" size="small" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="注册时间"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="AdresscurrentPage"
            :page-sizes="pageSizes2"
            :page-size="AdresspageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-dialog>

      <!--  -->
      <el-dialog
        width="550px"
        title="分发优惠券"
        :visible.sync="discountVisable"
        @close="onCancel('ruleForm')"
        custom-class="custom_drawer"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          size="mini"
          label-width="120px"
          class="form-drawer__main"
        >
          <el-form-item label="优惠券" prop="discount_id" style="margin-bottom:30px;">
            <el-select
              v-model="ruleForm.discount_id"
              clearable
              filterable
              placeholder="请选择优惠券"
              style="width:250px;"
            >
              <el-option
                v-for="(item,index) in discountList"
                :key="index"
                :label="item.discount_name"
                :value="item.id"
              >
                <!-- <span style="float: left;overflow:hidden;">{{ item.merchant_name }}</span>
                <span
                  style="float: right; color: #8492a6; font-size: 13px"
                >{{ item.merchant_phone }}</span>-->
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer">
          <el-button @click="onCancel('ruleForm')" size="small">取 消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="onConfirm('ruleForm')"
            :loading="confirmLoading"
          >{{ confirmLoading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  MAIN
} from "../utils/api";

export default {
  name: "Home",
  props: ["height"],

  data() {
    return {
      tableData: [],
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      currentRow: {}, //当前行数据信息
      errImg: 'this.src="' + require("../../static/img/user.png") + '"',
      formSearch: {
        nick_name: "",
        phone: ""
      }, //搜索
      // 会员地址
      tableAdressData: [],
      adressVisible: false, //会员地址弹框
      Adressloading: true, //显示加载表格
      AdresspageSize: 10, //每页多少条
      AdresscurrentPage: 1, //当前第几页
      pageSizes2: [10, 20, 30, 40, 50], //每页选择条数
      Adresstotal: 0, //共多少条
      discountList: [], //优惠券下拉
      discountVisable: false, //赠送优惠券弹框
      ruleForm: {
        discount_id: ""
      },
      rules: {
        discount_id: [
          { required: true, message: "请选择优惠券", trigger: "change" }
        ]
      },
      confirmLoading: false, //禁止重复点击
      SelectMember: [] //选中的用户
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    //获取初始数据
    getData() {
      this.loading = true;
      let params = {
        nick_name: this.formSearch.nick_name,
        phone: this.formSearch.phone,
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      };
          this.loading = false;

    },

    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },

    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },

    //查询
    search() {
      this.getData();
    },
    // 显示地址弹框
    handAdress(row) {
      this.currentRow = row;
      this.adressVisible = true;
      this.getMemberAddress();
    },
    // 会员地址接口
    getMemberAddress() {
      let params = {
        member_id: this.currentRow.id,
        pageNumber: this.AdresscurrentPage,
        pageSize: this.AdresspageSize
      };
      this.postRequest(getMemberAddress, params, MAIN).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.tableAdressData = res.data.list;
          this.Adresstotal = res.data.count;
          this.Adressloading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },

    //分页
    handleSizeAdressChange(val) {
      //每页 ${val} 条
      this.AdresspageSize = val;
      this.getMemberAddress();
    },
    handleCurrentAdressChange(val) {
      //当前页
      this.AdresscurrentPage = val;
      this.getMemberAddress();
    },
    // 分发优惠券弹框
    handDiscount(row) {
      if (row) {
        this.currentRow = row;
      }
      
      this.discountVisable = true;
    },

    // table 选择用户
    handleSelectionChange(val) {
      this.SelectMember = val;
    },
    onConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          // setTimeout(() => this.onCancel(formName), 1000);
          this.sendDiscount();
        } else {
          return false;
        }
      });
    },
    // 分发优惠券
    sendDiscount() {
      let member_id;
      if (this.currentRow.id) {
        member_id = this.currentRow.id;
      } else {
        let memberArr = this.SelectMember.map(v => {
          return v.id;
        });
        member_id = memberArr.join(",")
      }

      let params = {
        discount_id: this.ruleForm.discount_id,
        member_id: member_id
      };
      this.postRequest(sendDiscount, params, MAIN).then(res => {
        if (res.code == 200) {
          // console.log(res);
          // this.discountList = res.data;
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success"
          });
          this.onReset();
        }
      });
    },
    onCancel(formName) {
      this.$refs[formName].resetFields();
      this.onReset();
    },
    //清空重置表单
    onReset() {
      this.discountVisable = false;
      this.confirmLoading = false;
      this.SelectMember = [];
      this.$refs.multipleTable.clearSelection();
      this.currentRow = {};
      this.ruleForm = {
        member_id: ""
      };
    }
  }
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>
